<template>
  <div id="layout">
      <div class="header">
          <div class="logo"><i class="fa fa-shopping-bag" aria-hidden="true"></i>&nbsp;&nbsp;<span style="font:italic bold 18px/22px '微软雅黑';color:#666">淘点网&nbsp;.&nbsp;</span><span style="font:16px/22px '微软雅黑';color:#666">给你不一样的购物体验</span></div>

          <div class="user" v-if="!username"><a @click="logClick" href="javascript:;">登录</a>&nbsp;/&nbsp;<a @click="regClick" href="javascript:;">注册</a>&nbsp;&nbsp;&nbsp;<a @click="aboutClick" href="javascript:;">关于我们</a></div>
          <div class="user" v-else>欢迎&nbsp;&nbsp;,&nbsp;&nbsp;<a @click="userdetail" href="javascript:;">{{ username }}</a>&nbsp;&nbsp;<router-link :to="{name:'user'}" ><i class="fa fa-user" aria-hidden="true" title="个人中心"></i></router-link>&nbsp;&nbsp;<router-link :to="{name:'shopcar'}"><i class="fa fa-shopping-cart" aria-hidden="true"></i>&nbsp;<span style="font-size: 13px">购物车<span style="color:#cc0000">&nbsp;{{ goodscarcount }}&nbsp;</span>件</span></router-link>&nbsp;&nbsp;<a @click="edit" href="javascript:;"><i class="fa fa-external-link" aria-hidden="true" title="退出"></i></a></div>
      </div>
      <div class="nav">
        <div class="nav-top">
            <ul >
                <li v-for="(item,index) in navigation" @mouseover="listshow(index)" @mouseout="listhide(index)"><router-link :to="item.url"><div>{{ item.title }}<span v-if="item.icon">&nbsp;&nbsp;<i class="fa fa-caret-down" aria-hidden="true" style="color:white" ></i></span></div></router-link>
                </li>
            </ul>
        </div>
        <div  class="list" v-show="list2" >
          <ul >
             <li v-for="item in kefu" @mouseover="list2 =true" @mouseout="list2 =false"><router-link :to="item.url" >{{ item.title}}</router-link></li>
          </ul>
        </div>
        <div  class="list" v-show="list3" style="left: 24%;">
          <ul >
             <li v-for="item in help" @mouseover="list3 =true" @mouseout="list3 =false"><router-link :to="item.url" >{{ item.title}}</router-link></li>
          </ul>
        </div>
        <div  class="list" v-show="list4" style="left:31%;">
          <ul >
             <li v-for="item in jiaoliu" @mouseover="list4 =true" @mouseout="list4 =false"><router-link :to="item.url" >{{ item.title}}</router-link></li>
          </ul>
        </div>
        <div  class="list" v-show="list5" style="left:38%;">
          <ul >
             <li v-for="item in gonggao" @mouseover="list5 =true" @mouseout="list5 =false"><router-link :to="item.url" >{{ item.title}}</router-link></li>
          </ul>
        </div>
      </div>
      <transition name="fade" mode="out-in">
          <router-view></router-view>
      </transition>
      <div style="clear: left;width:100%;height: 30px"></div>
      <div class="footer">
          淘点 | 浙ICP备13037486号 | © taodian.com 
      </div>
      <!-- 关于我们 -->
    <my-dialog :is-show="isShowaboutDialog" @on-close="closeDialog('isShowaboutDialog')">
        <div class="about">
            <p class="summary">{{ company_info.title }}</p>
            <p class="context">
                &nbsp;&nbsp;&nbsp;&nbsp;
                {{ company_info.context }}
            </p>
            <p class="pic"><img :src="company_info.img" alt=""></p>
        </div>
    </my-dialog>
    <my-dialog :is-show="isShowlogDialog" @on-close="closeDialog('isShowlogDialog')">
        <log-form @log-dialog="onSuccesslog"></log-form>  
    </my-dialog>
    <my-dialog :is-show="isShowregDialog" @on-close="closeDialog('isShowregDialog')">
        <reg-form @reg-log="onSuccessreg"></reg-form>  
    </my-dialog>

    <my-dialog :is-show="isShowregDialog" @on-close="closeDialog('isShowregDialog')">
        <reg-form @reg-log="onSuccessreg"></reg-form>  
    </my-dialog>
    <my-dialog :is-show="isShowdetailDialog" @on-close="closeDialog('isShowdetailDialog')">
        <user-detail></user-detail>
    </my-dialog>
 
  </div>
</template>

<script>
import Dialog from './components/Public/dialog.vue'
import RegForm from './components/index/regForm.vue'
import LogForm from './components/index/logForm.vue'
import userDetail from './components/index/userdetail.vue'
export default {
  name: 'layout',
  created(){
      if(this.$cookie.get('username') == ''){
          this.username=false
      }else{
        this.username=this.$cookie.get('username');
      }   
      this.get_goodscar();
  }, 
  components:{
    MyDialog: Dialog,
    'reg-form':RegForm,
    'log-form':LogForm,
    userDetail
  },
  data() {
    return {
      list2:false,
      list3:false,
      list4:false,
      list5:false,
      isShowaboutDialog: false,
      isShowregDialog: false,
      isShowlogDialog:false,
      username:false,
      isShowdetailDialog:false,
      goodscarcount:0,
      company_info:{
        title:'网站简介',
        context:'淘点网属于XXX公司旗下，主营业务为：食品，移动设备，加点，化妆品，珠宝首饰，纸制品等，本网站专注客户体验，抱着客户优先的思维出发，为客户打造一个不一样的电商网站.',
        img:require('./assets/logo.png')
      },
      navigation:[
        {
          title:'首页',
          url:'/',
          icon:false
        },
        {
          title:'所有',
          url:'/all',
          icon:false
        },
        {
          title:'客服',
          url:'/kf',
          icon:false
        },
        {
          title:'教程',
          url:'/help',
          icon:false
        },
        {
          title:'交流',
          url:'/jiaoliu',
          icon:false
        },
        {
          title:'公告',
          url:'/gonggao',
          icon:true
        },
        {
          title:'商品购买',
          url:'/shoplist',
          icon:false
        },
        {
          title:'聊天室',
          url:'/chat',
          icon:false
        }

      ],
      kefu:[
        {
          title:'日常使用问题',
          url:'/kefu/1.html'
        },
        {
          title:'分销业务使用问题',
          url:'/kefu/2.html'
        }, 
        {
          title:'商家提现',
          url:'/kefu/3.html'
        }, 
        {
          title:'交易纠纷',
          url:'/kefu/4.html'
        }, 
        {
          title:'店铺认证',
          url:'/kefu/5.html'
        }, 
        {
          title:'贵宾通道',
          url:'/kefu/6.html'
        },         
      ],
      help:[
        {
          title:'帮助中心',
          url:'/help/1.html'
        },
        {
          title:'新手教程',
          url:'/help/2.html'
        }, 
        {
          title:'有赞学堂',
          url:'/help/3.html'
        }, 
        {
          title:'常见问题',
          url:'/help/4.html'
        }, 
        {
          title:'线下培训',
          url:'/help/5.html'
        }         
      ],
      jiaoliu:[
        {
          title:'运营杂谈',
          url:'/jiaoliu/1.html'
        },
        {
          title:'开发者交流',
          url:'/jiaoliu/2.html'
        }, 
        {
          title:'有赞商盟',
          url:'/jiaoliu/3.html'
        }, 
        {
          title:'聊天专区',
          url:'/jiaoliu/4.html'
        }, 
        {
          title:'会员俱乐部',
          url:'/jiaoliu/5.html'
        }, 
        {
          title:'货好你就来',
          url:'/jiaoliu/6.html'
        }        
      ],
      gonggao:[
        {
          title:'产品动态',
          url:'/gonggao/1.html'
        },
        {
          title:'有赞公告',
          url:'/gonggao/2.html'
        }, 
        {
          title:'有赞规则',
          url:'/gonggao/3.html'
        }, 
        {
          title:'有赞员工查询',
          url:'/gonggao/4.html'
        }       
      ],
    }
  },
  methods:{
    listshow(index){
        this.divattr(index,true);
    },
    listhide(index){
        this.divattr(index,false);
    }, 
    divattr(index,attr){
      if(index==2){
        this.list2 = attr;
      }else if(index==3){
        this.list3 = attr;
      }else if(index==4){
        this.list4 = attr;
      }else if(index==5){
        this.list5 = attr;
      }

    },  
    aboutClick () {
      this.isShowaboutDialog = true
    },
    closeDialog (attr) {
      this[attr] = false
    },
    regClick(){
      this.isShowregDialog = true
    },
    logClick(){
      this.isShowlogDialog = true
    },
    onSuccessreg(data){
      this.closeDialog ('isShowregDialog');
    },
    onSuccesslog(data){
      this.closeDialog ('isShowlogDialog');
      this.$cookie.set('username',data.username,7);
      this.$cookie.set('uid',data.id,7);
      this.username=data.username;
    },
    userdetail(){
      this.isShowdetailDialog =true;
    },
    edit(){
      this.$cookie.delete('username');
      this.$cookie.delete('uid');
      window.location.href="/";
    },
    get_goodscar(){
      var uid = this.$cookie.get('uid');
      this.$http({
          method:'GET',
              url:'http://123.56.86.203/food/getcardata?uid='+uid,
      }).then(function(info){
          var data=info.data;
          if(data.status == 0){
            this.goodscarcount =data.count;
          }else{
            alert('数据加载失败，请联系客服');
          }
      },function(error){
            console.log(error);
      })
    }
  }
}
</script>
<style>
@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 16px;
  font-family: Microsoft YaHei;
  color: #333; 

}

body {
  background-color:#eee;

}

a {
  text-decoration: none;
  color: #333; }

ul, li, table, dd, dt, tr, td {
  text-decoration: none; }
.header{
  width: 1000px;
  height: 70px;
  background-color:#fff;
  margin:0 auto;
}
.header a:hover{
    color:#ccc;
}
.header .logo{
  float: left;
  margin-left:30px;
  margin-top: 21px;
}
.header .logo i{
  color:#DB0000;
  font-size: 25px;
}
.header .user{
  float: right;
  padding-right: 20px;
  height: 30px;
  margin-top: 20px;
  color: black;
  font:14px/30px '微软雅黑';
}
.nav{
  width: 1000px;
  height: 40px;
  background-color:#393D49;
  margin:0 auto;
  position: relative;
}
.nav .nav-top ul li:first-child{
    padding-left: 30px;
}
.nav .nav-top ul li a{
  float: left;
  height:40px;
}
.nav .nav-top ul li a div{
  margin-top:12.5px;
  font:15px/15px '微软雅黑';
  color: white;
  padding-left: 20px;
  padding-right:20px;
}
.nav .nav-top ul li a:hover{
  background-color:#DB0000;
}
.list{
  position: absolute;
  top:40px;
  left: 17%;
  width: 120px;
  float: left;
  z-index: 999;
}
.list ul li {
  width: 120px;
  background-color:#4B4B4B; 
  height:30px;
  padding-left: 10px;

}
.list ul li:hover{
  background-color:#393D49; 
}
.list a{
  color:#ccc;
  font: 14px/30px '微软雅黑';
}
.router-link-exact-active{
  background-color:#DB0000; 
}
.footer{
    width: 1000px;
    margin:0 auto;
    height: 50px;
    text-align: center;
    font:13px/50px '微软雅黑';
    color:#666;
}
.about .summary{
  font:bold 15px/25px '微软雅黑';
  color:#333;
}
.about .context{
  margin-top: 10px;
  font:13px/25px '微软雅黑';
  color:#666;
}
.about .pic{
  width: 100%;
  margin:0 auto;
  margin-top: 20px;
}
.about .pic img{
  width: 100%;
  height: 300px;
}
.user a{
  font:15px/20px '微软雅黑';
  color:#666;
}
.user .router-link-exact-active{

  background-color: #fff;
}
</style>
